<template>
  <div class="history-wrap">
    <el-timeline>
      <el-timeline-item>
        <h1>目前一共{{ total }}篇文章</h1>
      </el-timeline-item>
      <SkeletonCpt v-if="hasMore && !historyArticleList.length" />
      <template v-if="historyArticleList">
        <el-timeline-item
          v-for="(item, index) in historyArticleList"
          :key="index"
          :timestamp="item.created_at"
        >
          <router-link
            :to="'/article/' + item.id"
            class="a-link"
          >
            {{ item.title }}
          </router-link>
        </el-timeline-item>
      </template>
    </el-timeline>

    <pagingCpt
      :count="total"
      :now-page="Params.nowPage"
      :page-size="Params.pageSize"
      @current-change="currentChange"
    />
  </div>
</template>

<script lang="ts">
import pagingCpt from '@/components/Paging/index.vue'
import SkeletonCpt from '@/components/Skeleton.vue'

import { defineComponent, inject, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { InitData } from '@/types/history'

export default defineComponent({
  name: 'HistoryView',
  components: {
    SkeletonCpt,
    pagingCpt
  },
  setup () {
    const $get:any = inject('$get')

    const data = reactive(new InitData())

    onBeforeMount(() => {
      currentChange(1)
    })

    onMounted(() => {
      document.title = '归档 - 小锅锅·博客'
    })

    const currentChange = async (nowPage:number) => {
      data.Params.nowPage = nowPage
      const res = await $get('article/list', data.Params)
      data.historyArticleList = res.rows
      data.hasMore = res.hasMore
      data.total = res.total
    }

    const dataRef = toRefs(data)
    return {
      ...dataRef,
      currentChange
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/css/constant.scss';

.history-wrap {
  .a-link {
    color: $theme-color5;
    text-decoration: none;
    font-size: 18px;
    &:hover {
      color: $theme-color1;
    }
  }
}
</style>
